/* 
    底部导航组件
 */
import React from 'react';
import {Text, TouchableOpacity, StyleSheet, Animated} from 'react-native';
//引入图标
import Icon from 'react-native-vector-icons/AntDesign';
//引入路由
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
//引入颜色
import { themeLightColor as themeColor } from '../assets/styles/themeColor';
//引入icon按钮
import { IconButtonBase } from '../components/Button'

//创建底部导航的堆栈
const Tab = createBottomTabNavigator();

//项
const TabItem = ({title, icon, isActive}) => {
  
    return (
      <>
        <Icon
          name={icon}
          size={20}
          style={[
            isActive ? styles.isActive : {},
            styles.icon
          ]}
        />
        <Text
          style={[
            //tailwind.textBase
            isActive ? styles.isActive : {},
            styles.title
          ]}>
          {title}
        </Text>
      </>
    );
}

// 自定义 TabBar 渲染
const TabBar = ({state, navigation, descriptors}) => {
  /*   const {
      state: {isTabBarShow},
    } = React.useContext(Context); */
  
    const [tabHeight] = React.useState(new Animated.Value(1));
  
    const height = tabHeight.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 50],
      extrapolate: 'clamp',
    });
  
    React.useEffect(() => {
        Animated.timing(tabHeight, {
            toValue: 1,
            duration: 300,
            useNativeDriver: false,
        }).start();
    }, [tabHeight]);
  
    const handlePress = (route, index) => {
      const event = navigation.emit({
        type: 'tabPress',
        target: route.key,
      });
      const isFocused = state.index === index;
      if (!isFocused && !event.defaultPrevented) {
        navigation.navigate(route.name);
      }
    };
  
    return (
      <Animated.View
        style={[
          [styles.Animated, styles.boxShadow, {height}],
        ]}>
        {state.routes.map((route, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => handlePress(route, index)}
            style={[
              styles.btnBox
            ]}>
            <TabItem
              {...descriptors[route.key].options}
              isActive={state.index === index}
            />
          </TouchableOpacity>
        ))}
      </Animated.View>
    );
}

//底部路由组件
export default function NavigatorTabs({routes,initialRouteName,HomeBtnClick}) {
    return (
      <Tab.Navigator 
        header={false} 
        initialRouteName={initialRouteName}
        screenOptions={{
            headerTitleStyle:{
                fontSize:16
            },
            headerTintColor:themeColor.font.font_3,
            headerLeft:() => (
                <IconButtonBase
                  onPress={HomeBtnClick}
                  IconName='home'
                  IconSize={26}
                  style={{marginLeft:10}}
                />
            )
        }}
        tabBar={props => <TabBar {...props} />}>
        {routes.map(item => (
          <Tab.Screen
            key={item.name}
            {...item}
            options={{
              headerStyle: styles.headerStyle,
              title: item.title,
              icon: item.icon,
            }}
          />
        ))}
      </Tab.Navigator>
    );
}

const styles = StyleSheet.create({
  isActive:{
    color:themeColor.main.core
  },
  icon:{
    marginRight:2
  },
  title:{
    fontWeight:'bold'
  },
  Animated:{
    flexDirection:'row',
    backgroundColor:'white'
  },
  boxShadow: {
    elevation: 3,
    shadowColor: '#000000',
    shadowOffset: {width: 0, height: 0},
    shadowOpacity: 1,
  },
  btnBox:{
    flexDirection:'row',
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  headerStyle:{
    height:40
  }
});